<template>
  <view>
    <button @click="onSetTimeOut()" type="primary">单次计时器</button>
    <button @click="onSetTimeOut('hmj', 666)" type="default">启动传参定时器</button>
    <button @click="onClearTimeOut()" type="warn">取消计时器</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      name: 'huangmeijian',
      timer: null // 保存定时器ID，用于取消操作
    }
  },
  methods: {
    // 合并无参和带参逻辑（通过参数数量判断）
    onSetTimeOut(username, pwd) {
      // 清除已有定时器（避免重复启动多个）
      if (this.timer) {
        clearTimeout(this.timer)
      }

      // 无参调用：当没有传参时执行
      if (arguments.length === 0) {
        console.log("无参定时器启动，3秒后执行回调");
        this.timer = setTimeout(() => {
          console.log("无参定时器回调执行");
          console.log("无参定时器回调结束");
          this.timer = null; // 执行完清空ID
        }, 3000);
      } 
      // 带参调用：当传入参数时执行
      else {
        console.log("带参定时器启动，参数：", username, pwd, "，2秒后执行回调");
        this.timer = setTimeout((x, y) => {
          console.log("带参定时器回调执行，接收参数：", x, y);
          this.timer = null; // 执行完清空ID
        }, 2000, username, pwd); // 传递参数给回调函数
      }
    },
    onClearTimeOut() {
      if (this.timer) {
        clearTimeout(this.timer); // 用保存的ID取消定时器
        console.log("定时器已取消");
        this.timer = null; // 取消后清空ID
      } else {
        console.log("当前没有运行中的定时器");
      }
    }
  }
}
</script>

<style>
/* 可添加按钮样式区分 */
button {
  margin: 10rpx;
}
</style>
